<template>


    <div>
        <h2>充值失败订单</h2>
        <div class="container">
            <div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-form-item label="搜索字段">
                        <el-select v-model="params.field" placeholder="搜索字段">
                            <el-option label="卡号" value="card_no"></el-option>
                            <el-option label="手机号" value="mobile"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键词">
                        <el-input v-model="params.keyword" placeholder="关键词"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reload">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="recharge_order_id"
                        label="订单ID"
                        >
                </el-table-column>
                <el-table-column
                        prop="sn"
                        label="充值单号"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        label="充值金额"
                        >
                </el-table-column>
                <el-table-column
                        prop="type_name"
                        label="油卡类型"
                        >
                </el-table-column>
                <el-table-column
                        prop="card_no"
                        label="卡号"
                        >
                </el-table-column>
                <el-table-column
                        prop="card_name"
                        label="持卡人姓名"
                        >
                </el-table-column>
                <el-table-column
                        prop="card_mobile"
                        label="持卡人手机"
                        >
                    <template slot-scope="scope">
                        <el-button type="text" @click="call(scope.row.mobile_en, scope.row.card_mobile)">{{scope.row.card_mobile}}</el-button>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="status_name"
                        label="状态"
                >
                </el-table-column>

                <el-table-column
                        prop="pay_at"
                        label="开始充值时间"
                >
                </el-table-column>
                <el-table-column
                        label="执行充值时间"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.status>0">{{scope.row.updated_at}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="充值结果"
                >
                    <template slot-scope="scope">
                        <el-button @click="showResult(scope.row.result)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button @click="charge(scope.row.id)">重试</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

            <el-dialog
                    title="充值结果"
                    :visible.sync="dialogVisible"
                    width="80%"
                    :close-on-click-modal="false"
            >

                <div><pre>
            <code>
                {{result}}
            </code>
        </pre>
                </div>

                <div style="text-align: center">
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>

</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        items: [],
        loading: false,
        params: {
          limit: 20,
          offset: 0,
          type: 2,
          field:'mobile',
          keyword:''
        },
        currentPage: 1,
        total: 0,
        result: ''
      }
    },
    created() {
      this.fetch();
    },
    methods: {
      fetch() {
        this.loading = true;
        axios.get('/admin/api/recharge_task', {params: this.params}).then((res) => {
          if (res.data.code === 0) {
            this.items = res.data.data.items;
            this.total = res.data.data.total;
          } else {
            this.$message(res.data.msg);
          }
          this.loading = false;
        }).catch(function () {
          this.$message('系统错误');
          this.loading = false;
        })
      },


        call(mobileEn, mobile) {
            this.$confirm('是否拨打'+mobile, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true,
                    axios.post(
                        '/admin/api/call_mobile',
                        {mobile_en:mobileEn}
                    ).then((res) => {
                        if (res.data.code === 0) {
                            this.$message({
                                type: 'success',
                                message: '拨打成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '拨打失败!'
                            });
                        }
                        this.loading = false;
                    }).catch(function() {
                        this.$message('系统错误');
                        this.loading = false;
                    })
            }).catch(() => {
            });
        },

      // 切换分页
      setPage: function (page) {
        this.currentPage = page;
        this.params.offset = (page - 1) * this.params.limit;
        this.fetch()
      },
      // 重新请求接口获取数据，参数发生了变化，页码重置为1
      reload: function () {
        if (this.currentPage === 1) {
          this.fetch();
        } else {
          this.setPage(1);
        }
      },
      showResult(msg) {
        this.dialogVisible = true;
        this.result = msg;
      },
      charge(id) {
        this.loading = true;
        axios.post('/admin/api/recharge_task/'+id+'/try').then((res) => {
          if (res.data.code === 0) {
            this.fetch();
          } else {
            this.$message(res.data.msg);
          }
          this.loading = false;
        }).catch(function () {
          this.$message('系统错误');
          this.loading = false;
        })
      }
    }
  }
</script>